<template>
	<view class="pageview">
		<cl-navbar :title="$t('my_file.setting.locale.title')" leftIconSize="40rpx" placeholder autoBack>
		</cl-navbar>
		<view class="pageContent">
			<view style="margin-bottom: 50rpx;">
				<view class="cellviewGrop" v-for="(item,index) in locales" :key="index">
					<template v-if="locale == item.code">
						<view class="cellview" >
							<view class="cellview__left">
								<text class="cellview__left__title">{{item.text}}</text>
							</view>
							<view class="cellview__right">
								<image src="/static/icon/select.svg" mode="" style="width: 36rpx;height: 36rpx;"></image>
							</view>
						</view>
					</template>
				</view>
			</view>
			
			<view class="cellviewGrop" v-for="(item,index) in locales" :key="index" @click="setLocales(item.code)" v-if="locale != item.code">
				<view class="cellview" >
					<view class="cellview__left">
						<text class="cellview__left__title">{{item.text}}</text>
					</view>
					<view class="cellview__right">
						<image src="/static/icon/select.svg" mode="" style="width: 36rpx;height: 36rpx;" v-if="locale == item.code"></image>
						<image src="/static/icon/no-select.svg" mode="" style="width: 36rpx;height: 36rpx;" v-else></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'my_setting_locale',
		data() {
			return {
				locale: 'zh-Hans',
			}
		},
		computed:{
		  locales() {
		    return [{
		        text: this.$t('locale.en'),
		        code: 'en'
		      },
		      {
		        text: this.$t('locale.zh-hans'),
		        code: 'zh-Hans'
		      }
		    ]
		  }
		},
		onLoad() {

		},
		onShow() {
			this.locale = uni.getLocale()
		},
		methods: {
			setLocales(code){
				this.$api.user.setLanguage({
					language:code
				}).then(res=>{
					if(res){
						this.locale = code
						uni.setLocale(code);
						this.$i18n.locale = code;
					}
				})
			}
		},
	};
</script>

<style scoped lang="scss">
	.cellviewGrop {
		background: #ffffff;
		border-radius: 20rpx;
		margin: 20rpx 30rpx 0;

		.cellview {
			display: flex;
			justify-content: space-between;
			padding: 0 30rpx;
			height: 110rpx;

			&__left {
				display: flex;
				align-items: center;


				&__title {
					font-size: 28rpx;
				}
			}

			&__right {
				display: flex;
				align-items: center;

				&__content {
					font-size: 28rpx;
					color: #61626e;
				}
			}
		}
	}
</style>